<template>
  <div class="tabs-wrapper">
    <div class="tabs-btns">
      <van-button :type="!active ? 'danger' : 'default'" @click="onLeftBtn">配送上门</van-button>
      <van-button :type="!active ? 'default' : 'danger'" @click="onRightBtn">到店自提</van-button>
    </div>
    <div class="tabs-left-context" v-show="!active">
      <van-cell title="选择收货地址" is-link />
      <van-cell
        class="tabs-main"
        title="收件人：叶子"
        icon="location-o"
        value="13055210835"
        label="提货地址：福建省泉州市丰泽区东湖街道东湖街125号即富大厦"
      />
    </div>
    <div class="tabs-right-context" v-show="active">
      <van-cell title="提货时间" value="选择提货时间" is-link />
      <van-cell
        class="tabs-main"
        title="提货门店-世界城门店"
        icon="location-o"
        value="13055210835"
        label="提货地址：福建省泉州市丰泽区东湖街道东湖街125号即富大厦"
      />
    </div>
    <img class="site-line" src="@/assets/images/confirmOrder/icon_line.png" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0
    }
  },
  methods: {
    onLeftBtn () {
      this.active = 0
    },
    onRightBtn () {
      this.active = 1
    }
  },
}
</script>

<style lang="scss" scoped>
@mixin mb {
  margin-bottom: halfPx(20px);
}
@mixin textCenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.tabs-wrapper {
  display: flex;
  flex-direction: column;
  .tabs-btns {
    display: flex;
    justify-content: center;
    background-color: #fff;
    padding-bottom: halfPx(30px);
    @include mb;
    .van-button {
      width: halfPx(345px);
      height: halfPx(60px);
      @include textCenter;
      border-color: #fc0636;
      font-size: halfPx(28px);
    }
    .van-button:first-child {
      border-radius: halfPx(4px) 0 0 halfPx(4px);
    }
    .van-button:last-child {
      border-radius: 0 halfPx(4px) halfPx(4px) 0;
    }
  }
  .site-line {
    width: 100%;
    height: halfPx(4px);
    @include mb;
  }
  .tabs-main {
    .van-cell__value {
      flex: auto;
      position: absolute;
      right: 0;
      padding-right: 16px;
    }
    .van-cell__title {
      span {
        font-weight: bold;
      }
    }
  }
}
</style>
